<template>
   <div class="container">
       <!-- <video muted="muted" src="../../assets/video/三维唯美日出背景mp4格式视频下载_正版视频编号40528-摄图网.mp4" loop="loop" autoplay="autoplay"></video> -->
        <div id="form">
          <el-form :model="loginForm" status-icon :rules="rules" ref="loginForm" label-width="100px" class="demo-ruleForm">
          <i @click="changeLoginType" :class="[`jiaobiao`,`iconfont`, jiaobiaoType]"></i>
          <general  @changeSmsType="changeSmsType" v-if="loginType===`common`" ref="general" @syncLoginForm="handlesyncLoginFrom" @submit="submit"/>
          <erweima v-else-if="loginType===`qrcode`" :storageUserInfo="storageUserInfo"/>
          <Message  v-else  :storageUserInfo="storageUserInfo"/>
          </el-form>
        </div>
   </div>
</template>

<script>
import general from "@/components/Login/general.vue"
import Message from "@/components/Login/Message.vue"
import erweima from "@/components/Login/erweima.vue"
import * as api from "@/api/users"
import storage from "@/utils/storage"
  // 校验验证码
    var validateCaptcha = (rule, value, callback) => {
    
    if(value.length !== 5){
        callback('验证码至少5位数')
    }else{
        callback();
    }
    
    };
    // 校验用户名
    var validateUsername = (rule, value, callback) => {
        // console.log(rule)
        // console.log(value)
        // 3-16字母数字下划线
        var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
        //如果校验通过,要直接回调callback()
        //如果校验不通过 callback中传参数
        if (uPattern.test(value)) {
            callback()
        } else {
            callback('3-16字母数字下划线')
        }
    };
    // 校验密码
    var validatePassword = (rule, value, callback) => {
    
    // 是否数字、字母或下划线
    if(value.length>=3){
        callback()
    }else{
        callback('请输入正确的密码');
    }
    
    };
  export default {
    components:{
      general,
      Message,
      erweima
    },
    computed:{
      jiaobiaoType(){
        if(this.loginType=="common"){
          return "icon-erweimajiaobiao"
        }
        if(this.loginType=="qrcode" || this.loginType=="sms"){
          return "icon-diannaojiaobiao"
        }
      }
    },
    data() {
      return {
        //common常规登入 | qrcode二维码 | sms:短信验证码
        loginType:'common',
        loginForm: {
          username: '',
          password: '',
          captcha: ''
        },
        rules: {
          // 表单验证规则
          username: [
            { validator: validateUsername, trigger: 'blur' }
          ],
          password: [
            { validator: validatePassword, trigger: 'blur' }
          ],
          captcha: [
            { validator: validateCaptcha, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      // 1.获取子组件中的loginForm的实时的值
      handlesyncLoginFrom(newLoginForm){
        this.loginForm=newLoginForm
      },
      // 2.通过sbmit事件进行校验
      submit() {
        this.$refs["loginForm"].validate((valid) => {
          if (valid) {
            // 本地校验通过提交
            // 登入
            // 1.获取后台的验证码
            // 2.进行本地校验
            // 3.本地校验通过====》去校验验证码
            // 4.验证码通过====》校验用户名和密码
            // 5.成功和失败
            // alert('submit!');
            api.vertifyCaptcha(this.loginForm.captcha)
            .then(async res=>{
                // console.log(res)
                if(res.data.state){
                  // 验证码通过，检验用户名和密码
                  let {username,password}=this.loginForm
                  let res=await api.loginApi(username,password)
                  if(res.data.state){
                    //登录成功
                    // 存储用户信息到本地
                    this.storageUserInfo(res.data)
                    // 跳转到主页
                    this.$router.push("/")
                  }
                }else{
                  //验证码不通过 刷新验证码
                  this.$refs["general"].getCaptcha()
                }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //封装一个方法，用于存储用户的信息和token
      storageUserInfo({userInfo,token,permission}){
        // 将信息存到vuex
        this.$store.commit("users/SET_USERINFO",userInfo)
        storage.set("userInfo",userInfo)
        storage.set("cc-token",token)
        storage.set("permission",permission)
      },
      changeLoginType(){
        if(this.loginType==="common"){
          this.loginType="qrcode"
        }else if(this.loginType==="qrcode"){
          this.loginType="common"
        }else if(this.loginType==="sms"){
          this.loginType="common" 
        }
      },
      // 更改成短信登录
      changeSmsType(){
        this.loginType="sms"
      }
    }
  }
</script>

<style scoped lang="less">
.container video{
  width:1600px;
  padding:0;
  margin:0;
  position:fixed;
  left:0;
  top:0;
  bottom:0;
  right:0;
 
}
#form{
  width:400px;
  height:500px;
  background-color:#0000004d;
  text-align:center;
  margin:0 auto;
  position:absolute;
  top:20%;
  left:10%;
  padding:60px 60px;
  box-sizing:border-box;
  color:white;
}
.jiaobiao {
  font-size: 60px;
  color: #fff;
  position: absolute;
  right: -1px;
  top: -1px;
  cursor: pointer;
  opacity: 0.7;
}
</style>

